<script lang="ts" setup>
interface ProductItem {
  id: string
  image: string
  title: string
  desc: string
  price: string
  location: string
}

defineProps<{
  data: ProductItem[]
}>()

// 商品点击处理
function handleItemClick(item: ProductItem) {
  // 跳转到商品详情页
  uni.navigateTo({
    url: `/pages/product/detail?id=${item.id}`,
  })
}

// 生成随机百分比（模拟数据）
function getRandomPercentage() {
  return Math.floor(Math.random() * 100) + 1
}
</script>

<template>
  <view class="px-15px">
    <view
      v-for="item in data" :key="item.id" class="mb-15px cursor-pointer rounded-3 bg-[#181818] px-15px py-17px"
      @click="handleItemClick(item)"
    >
      <!-- 头部信息 -->
      <view class="mb-3 flex items-start">
        <!-- 左侧头像 -->
        <view class="mr-3 h-32px w-32px flex-shrink-0 overflow-hidden rounded-full">
          <image :src="item.image" mode="aspectFill" class="h-full w-full" />
        </view>

        <!-- 右侧信息 -->
        <view class="flex-1">
          <view class="flex items-center justify-between">
            <!-- 用户名和分类 -->
            <view class="flex items-center">
              <text class="mr-2 text-xs text-white font-medium">
                手机-苹果iPhone
              </text>
            </view>
          </view>
          <!-- 时间 -->
          <text class="text-11px text-gray-400">
            23分钟前
          </text>
        </view>
      </view>

      <!-- 标题行 -->
      <view class="mb-3 w-315px flex items-center">
        <text class="text-left text-16px text-white font-normal leading-25px" style="font-family: 'Alibaba PuHuiTi 2.0', 'Alibaba PuHuiTi 20';">
          {{ item.title }}
        </text>
      </view>

      <!-- 详细描述 -->
      <text class="block text-left text-14px text-white font-normal leading-25px leading-relaxed" style="font-family: 'Alibaba PuHuiTi 2.0', 'Alibaba PuHuiTi 20';">
        {{ item.desc }}
      </text>
    </view>
  </view>
</template>
